<template>
    <div class="person">
        <!--
        <h2>{{ a }}</h2>
        <h2>{{ list }}</h2>
        <h2>{{ x.list }}</h2>
    -->
        <!-- v-for 可以接收数组或循环次数(数字)-->
        <ul>
            <li v-for="p in list" :key="p.id">
                {{ p.name }} -- {{ p.age }}
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Person',
}
</script>

<script setup lang="ts">
import { type IPerson, type Persons } from '@/types';
import { defineProps, withDefaults } from 'vue';
// 接受从父组件传入的参数 a
// defineProps(['a'])

// 接受a,同时将 props a 赋值给变量 a
// let x = defineProps(['a', 'b', 'c', 'list'])
// console.log(x, x.b)

// 只接收list,如果传次数就有问题
// defineProps(['list'])

// 接收名为list的限制类型
// defineProps<{ list: Persons }>()

// 接收list+限制类型+限制必要性+指定默认值
withDefaults(defineProps<{ list?: Persons }>(), {
    list: () => [{ id: '999', name: 'diablo', age: 100 }]
})

</script>

<!-- scoped: 局部样式,避免同名选择器冲突 -->
<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 2px;
}

li {
    font-size: 15px;
}
</style>